<template>
  <div class="tdlyztgh">
    <div class="tdlyztgh_top">
      <div class="tdlyztgh_top_text">土地利用总体规划</div>
    </div>
    <div class="tdlyztgh_button">
      <div class="tdlyztgh_button_one">
        <div class="tdlyztgh_button_title">
          期末地类图斑
        </div>
        <el-switch
          v-model="switchValue2"
          :disabled="isdisabled"
          active-color="#409EFF"
          inactive-color="#d1d1d1"
          @change="switchChange2"
        >
        </el-switch>
      </div>
      <div class="tdlyztgh_button_two">
        <div class="tdlyztgh_button_title">建设用地管制分区</div>
        <el-switch
          v-model="switchValue1"
          :disabled="isdisabled"
          active-color="#409EFF"
          inactive-color="#d1d1d1"
          @change="switchChange1"
        >
        </el-switch>
      </div>
    </div>
    <div class="tdlyztgh_middle">
      <div class="tdlyztgh_middle_button">
        <div
          class="tdlyztgh_middle_button_image"
          :class="boxBlockItem == 0 ? 'image_active' : ''"
        >
          <div
            class="tdlyztgh_middle_content"
            @click="box_blockClick(0)"
            v-if="parseFloat(allJsydZhanbi)"
            :style="{
              background:
                boxBlockItem == 0
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="tdlyztgh_middle_content_top">选址涉及【建设用地】</div>
            <div class="tdlyztgh_middle_content_bottom">
              <!-- {{ areaDatas1 ? areaDatas1 : "暂无数据" }}个 -->
              <div class="tdlyztgh_middle_content_bottom_one">
                {{ allJsydHa }} 公顷 (合 {{ allJsydMu }} 亩)
              </div>
              <div class="tdlyztgh_middle_content_bottom_two">
                占比 {{ allJsydZhanbi }}%
              </div>
            </div>
          </div>
          <div v-else class="tdlyztgh_middle_content">
            <div class="tdlyztgh_middle_content_top">
              选址不涉及【建设用地】
            </div>
          </div>
        </div>

        <div
          class="tdlyztgh_middle_button_image"
          :class="boxBlockItem == 1 ? 'image_active' : ''"
        >
          <div
            class="tdlyztgh_middle_content"
            @click="box_blockClick(1)"
            v-if="parseFloat(allNoJsydZhanbi)"
            :style="{
              background:
                boxBlockItem == 1
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="tdlyztgh_middle_content_top">
              选址涉及【非建设用地】
            </div>
            <div class="tdlyztgh_middle_content_bottom">
              <!-- {{ areaDatas1 ? areaDatas1 : "暂无数据" }}个 -->
              <div class="tdlyztgh_middle_content_bottom_one">
                {{ allNoJsydHa }} 公顷 (合 {{ allNoJsydMu }} 亩)
              </div>
              <div class="tdlyztgh_middle_content_bottom_two">
                <!-- 占比 {{ allNoJsydZhanbi }}% -->
                占比 {{ (100 - allJsydZhanbi).toFixed(1) }}%
              </div>
            </div>
          </div>
          <div v-else class="tdlyztgh_middle_content">
            <div class="tdlyztgh_middle_content_top">
              选址不涉及【非建设用地】
            </div>
          </div>
        </div>

        <div
          class="tdlyztgh_middle_button_image"
          :class="boxBlockItem == 2 ? 'image_active' : ''"
        >
          <div
            class="tdlyztgh_middle_content"
            @click="box_blockClick(2)"
            v-if="parseFloat(allowData.ratio)"
            :style="{
              background:
                boxBlockItem == 2
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="tdlyztgh_middle_content_top">
              选址涉及【允许建设区】
            </div>
            <div class="tdlyztgh_middle_content_bottom">
              <!-- {{ areaDatas1 ? areaDatas1 : "暂无数据" }}个 -->
              <div class="tdlyztgh_middle_content_bottom_one">
                {{ allowData.areaHa }} 公顷 (合 {{ allowData.areaMu }} 亩)
              </div>
              <div class="tdlyztgh_middle_content_bottom_two">
                占比 {{ allowData.ratio }}%
              </div>
            </div>
          </div>
          <div v-else class="tdlyztgh_middle_content">
            <div class="tdlyztgh_middle_content_top">
              选址不涉及【允许建设区】
            </div>
          </div>
        </div>

        <div
          class="tdlyztgh_middle_button_image"
          :class="boxBlockItem == 3 ? 'image_active' : ''"
        >
          <div
            class="tdlyztgh_middle_content"
            @click="box_blockClick(3)"
            v-if="parseFloat(conditionData.ratio)"
            :style="{
              background:
                boxBlockItem == 3
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="tdlyztgh_middle_content_top">
              选址涉及【有条件建设区】
            </div>
            <div class="tdlyztgh_middle_content_bottom">
              <!-- {{ areaDatas1 ? areaDatas1 : "暂无数据" }}个 -->
              <div class="tdlyztgh_middle_content_bottom_one">
                {{ conditionData.areaHa }} 公顷 (合
                {{ conditionData.areaMu }} 亩)
              </div>
              <div class="tdlyztgh_middle_content_bottom_two">
                占比 {{ conditionData.ratio }}%
              </div>
            </div>
          </div>
          <div v-else class="tdlyztgh_middle_content">
            <div class="tdlyztgh_middle_content_top">
              选址不涉及【有条件建设区】
            </div>
          </div>
        </div>

        <div
          class="tdlyztgh_middle_button_image"
          :class="boxBlockItem == 4 ? 'image_active' : ''"
        >
          <div
            class="tdlyztgh_middle_content"
            @click="box_blockClick(4)"
            v-if="parseFloat(limitData.ratio)"
            :style="{
              background:
                boxBlockItem == 4
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="tdlyztgh_middle_content_top">
              选址涉及【限制建设区】
            </div>
            <div class="tdlyztgh_middle_content_bottom">
              <!-- {{ areaDatas1 ? areaDatas1 : "暂无数据" }}个 -->
              <div class="tdlyztgh_middle_content_bottom_one">
                {{ limitData.areaHa }} 公顷 (合 {{ limitData.areaMu }} 亩)
              </div>
              <div class="tdlyztgh_middle_content_bottom_two">
                <!-- 占比 {{ limitData.ratio }}% -->
                占比
                {{
                  (
                    100 -
                    (allowData.ratio ? allowData.ratio : 0) -
                    (conditionData.ratio ? conditionData.ratio : 0)
                  ).toFixed(1)
                }}%
              </div>
            </div>
          </div>
          <div v-else class="tdlyztgh_middle_content">
            <div class="tdlyztgh_middle_content_top">
              选址不涉及【限制建设区】
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getXzRegion } from "../../../../../api/connect.js";
import guihuaTableNames from "../../left/guihuaTableNames.json";
import { editMap } from "../../../../../utils/map.js";

export default {
  data() {
    return {
      boxBlockItem: 0,

      // 计算总建设用地的值
      allJsydHa: 0,
      allJsydMu: 0,
      allJsydZhanbi: 0,

      // 计算总 非建设用地的值
      allNoJsydHa: 0,
      allNoJsydMu: 0,
      allNoJsydZhanbi: 0,

      // 允许建设区中的值
      allowData: {},
      // 有条件建设区中的值
      conditionData: {},
      // 限制建设区中的值
      limitData: {},

      //switch的值
      switchValue1: false, // 建设用地管制分区
      switchValue2: false, // 期末地类图斑
      isdisabled: false, //是否禁用

      // 土地利用总体规划图层的loading
      // 土地利用总体规划(建设用地管辖分区的loading)
      tdlyJsydLoading: false,
      // 土地利用总体规划(期末地类图斑的loading)
      tdlyQmdltbLoading: false,

      // 保存期末地类图斑的画面数据
      polygondata1: [],
      polylinedata1: [],

      // 保存建设用地管制分区的画面数据
      polygondata2: [],
      polylinedata2: [],
    };
  },
  computed: {
    ...mapState("Sjsx", [
      "tdscData",
      "tdlyztghAData",
      "tdlyztghBData",
      "isRegion",
      "tuliData",
      "polygonType",
      "polygonTypeId",
    ]),
  },
  mounted() {
    this.getAllZtghA();
    this.getAllZtghB();
  },
  watch: {
    polygonTypeId(newVal, oldVal) {
      console.log(newVal, "新的newVal");
    },
  },
  methods: {
    ...mapActions({
      setTdlyJsydLoading_act: "Sjsx/setTdlyJsydLoading_act",
      setTdlyQmdltbLoading_act: "Sjsx/setTdlyQmdltbLoading_act",
      setTuliData_act: "Sjsx/setTuliData_act",
      setTuliPolygonData_act: "Sjsx/setTuliPolygonData_act",
      setTuliPolyLineData_act: "Sjsx/setTuliPolyLineData_act",
      setPolygonType_act: "Sjsx/setPolygonType_act",
    }),
    // 判断选中了哪个盒子
    box_blockClick(val) {
      this.boxBlockItem = val;
    },
    // 计算建设用地 及 非建设用地的总额 (公顷、亩、占比)
    getAllZtghA() {
      console.log(this.tdlyztghAData, "关系表a的值");
      this.tdlyztghAData.forEach((item) => {
        if (item.firstClass === "建设用地") {
          this.allJsydHa += Number(item.areaHa);
          this.allJsydMu += Number(item.areaMu);
          this.allJsydZhanbi += Number(item.ratio);
        } else if (item.firstClass === "非建设用地") {
          this.allNoJsydHa += Number(item.areaHa);
          this.allNoJsydMu += Number(item.areaMu);
          this.allNoJsydZhanbi += Number(item.ratio);
        }
      });
      this.allJsydHa = this.allJsydHa.toFixed(3);
      this.allNoJsydHa = this.allNoJsydHa.toFixed(3);
      this.allJsydMu = this.allJsydMu.toFixed(2);
      this.allNoJsydMu = this.allNoJsydMu.toFixed(2);

      // 判断一下是不是为100，如果是的话就将小数点改为0位，不是的话就改为1位
      if (parseInt(this.allJsydZhanbi) == 100) {
        this.allJsydZhanbi = this.allJsydZhanbi.toFixed(0);
      } else {
        this.allJsydZhanbi = this.allJsydZhanbi.toFixed(1);
      }

      if (parseInt(this.allNoJsydZhanbi) == 100) {
        this.allNoJsydZhanbi = this.allNoJsydZhanbi.toFixed(0);
      } else {
        this.allNoJsydZhanbi = this.allNoJsydZhanbi.toFixed(1);
      }

      // console.log(this.allJsydHa,this.allNoJsydHa,"建设用地的ha，非建设用地的ha");
      // console.log(this.allJsydMu,this.allNoJsydMu,"建设用地的Mu，非建设用地的Mu");
      // console.log(this.allJsydZhanbi,this.allNoJsydZhanbi,"建设用地的占比，非建设用地的占比");
    },
    // 获取到允许建设区、有条件建设区、限制建设区中的数据
    getAllZtghB() {
      console.log(this.tdlyztghBData, "关系表b的值");
      this.tdlyztghBData.forEach((item) => {
        console.log(item, "关系表b的每个item值");
        if (item.name.value === "限制建设区") {
          console.log("这是限制建设区");
          this.limitData = item;
        } else if (item.name.value === "允许建设区") {
          console.log("这是允许建设区");
          this.allowData = item;
        } else if (item.name.value === "有条件建设区") {
          console.log("这是有条件建设区");
          this.conditionData = item;
        }
      });
    },

    // 点击后画面 （建设用地管制分区）
    async getRegionDataOne() {
      try {
        let temp = JSON.parse(
          JSON.stringify(
            guihuaTableNames.find(
              (r) => r.layer_chinese_name === "建设用地管制分区"
            )
          )
        );
        if (this.switchValue1 == true) {
          const result = await getXzRegion(this.isRegion, temp);

          const polylinedata = [];
          const polygondata = [];
          let Type = [];
          for (let index = 0; index < result.data.length; index++) {
            const item = result.data[index];
            let itemJson = JSON.parse(item);
            Type.push(itemJson.properties.type);
            console.log(Type, "Type的值");
            if (
              (!itemJson && !itemJson.geometry) ||
              !itemJson.geometry.coordinates
            ) {
              continue;
            }
            const field_value = itemJson.properties.field_value;
            const type = itemJson.properties.type;
            let color1 = "#FFFF00"; //设置默认颜色
            if (temp.hex instanceof Array) {
              let colorTemp = temp.hex.find(
                (p) => p.field_value === field_value && p.type === type
              );
              if (!colorTemp) {
                //如果没有值
                colorTemp = temp.hex.find((p) => p.field_value === "default");
              }
              color1 = colorTemp.hex;
            } else {
              color1 = temp.hex;
            }
            // console.log(
            //   itemJson.geometry.coordinates,
            //   "itemJson.geometry.coordinates"
            // );
            const r = parseInt(color1.substr(1, 2), 16) / 255;
            const g = parseInt(color1.substr(3, 2), 16) / 255;
            const b = parseInt(color1.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.5];
            const polygon = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              GroupID:"switch_Polygon",
              coordinates: itemJson.geometry.coordinates,
              userData: JSON.stringify(itemJson.properties),
              color: colorArray,
              frameColor: "#FFFFFF", //边框颜色
              frameThickness: 10, //边框厚度
              intensity: 0, //亮度
              style: 0,
            };
            polygondata.push(polygon);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    GroupID:"switch_Polygon",
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    userData: JSON.stringify(itemJson.properties),
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  GroupID:"switch_Polygon",
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  userData: JSON.stringify(itemJson.properties),
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
            // let polygon3d = {
            //   id: "polygon3d_" + temp.layer_english_name + "_" + index,
            //   coordinates: itemJson.geometry.coordinates,
            //   color: [1, 1, 1, 0.5], //颜色值
            //   height: 150, //3D多边形的高度
            //   intensity: 2.0, //亮度
            //   style: 2,
            // };
            // polylinedata.push(polygon3d);
          }

          this.polylinedata2 = polylinedata;
          this.polygondata2 = polygondata;

          // 高亮代码
          let polygonType = [];
          console.log(polygondata, "polygondata的值");
          polygondata.forEach((item) => {
            polygonType.push(item);
          });
          console.log(polygonType, "----polygon的Type----");
          this.setPolygonType_act(polygonType);
          // console.log(this.polygonType,"vuex里的polygonType");

          this.setTuliPolygonData_act({
            text: "建设用地管制分区",
            ids: polygondata,
          }); // 将画面的数据传到图例中
          this.setTuliPolyLineData_act({
            text: "建设用地管制分区",
            ids: polylinedata,
          }); // 将画线的数据传到图例中

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.tdlyJsydLoading = false;
          this.setTdlyJsydLoading_act(this.tdlyJsydLoading);
          console.log(temp, "建设用地temp的值");

          // 过滤图例
          let filterHex = temp.hex.filter((item) => Type.includes(item.type));
          console.log(filterHex, "filterHex");
          temp.hex = filterHex;
          temp.hex.unshift({
            field_value: "default",
            hex: "#808080",
            layer_class_field: "SEN_LIN_LB",
            type: "其他",
          });

          console.log(this.$store.state, "this.$store.state");
          // 判断vuex中是否有存储图例，无则直接加入，有则追加加入
          !this.tuliData || this.tuliData.length === 0
            ? this.setTuliData_act([temp])
            : this.setTuliData_act([...this.tuliData, temp]);

          // await window.__g.polygon.add(polygondata);
          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue1 == false) {
          if (this.polygondata2 && this.polygondata2 instanceof Array) {
            // debugger;
            let polygonIds = [];
            let polylinedataIds = [];
            this.polygondata2.forEach((element) => {
              polygonIds.push(element.id);
            });
            this.polylinedata2.forEach((element) => {
              polylinedataIds.push(element.id);
            });
            await window.__g.polygon.delete(this.polygonTypeId); // 关闭高亮的图层
            await window.__g.polygon.delete(polygonIds);
            await window.__g.polyline.delete(polylinedataIds);
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue1 = false; //请求失败后，将switch框设置为false
        this.tdlyJsydLoading = false;
        this.setTdlyJsydLoading_act(this.tdlyJsydLoading); // 请求失败后，将loading窗关闭
      }
    },

    // 点击后画面 （期末地类图斑）
    async getRegionDataTwo() {
      try {
        // console.log("1:   " + Date.now().valueOf());
        console.log(guihuaTableNames);
        let temp = JSON.parse(
          JSON.stringify(
            guihuaTableNames.find(
              (r) => r.layer_chinese_name === "期末地类图斑"
            )
          )
        );
        //   console.log(temp, "temp2temp2temp2temp2temp2");
        // console.log("2:   " + Date.now().valueOf());
        if (this.switchValue2 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          console.log(result, "result");
          const polylinedata = [];
          const polygondata = [];
          let Type = [];
          // console.log("3:   " + Date.now().valueOf());
          for (let index = 0; index < result.data.length; index++) {
            const item = result.data[index];
            let itemJson = JSON.parse(item);
            Type.push(itemJson.properties.type);
            console.log(itemJson, "kk'itemJson");
            //   console.log(Type, "Type的值");
            if (
              (!itemJson && !itemJson.geometry) ||
              !itemJson.geometry.coordinates
            ) {
              continue;
            }
            // console.log(itemJson, "itemJson");
            const field_value = Number(itemJson.properties.field_value);
            const type = itemJson.properties.type;
            let color1 = "#FFFF00"; //设置默认颜色
            if (temp.hex instanceof Array) {
              console.log(temp.hex, "temp.hex之前");
              let colorTemp = temp.hex.find((p) => {
                return p.field_value === field_value && p.type === type;
              });
              console.log(temp.hex, "temp.hex之后");
              if (!colorTemp) {
                //如果没有值
                colorTemp = temp.hex.find((p) => p.field_value === "default");
              }
              color1 = colorTemp.hex;
            } else {
              color1 = temp.hex;
            }
            // console.log(
            //   itemJson.geometry.coordinates,
            //   "itemJson.geometry.coordinates"
            // );
            const r = parseInt(color1.substr(1, 2), 16) / 255;
            const g = parseInt(color1.substr(3, 2), 16) / 255;
            const b = parseInt(color1.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            // console.log(color1, "colorArray");
            const polygon = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              GroupID:"switch_Polygon",
              coordinates: itemJson.geometry.coordinates,
              userData: JSON.stringify(itemJson.properties),
              color: colorArray,
              frameColor: "#FFFFFF", //边框颜色
              frameThickness: 10, //边框厚度
              intensity: 0, //亮度

              style: 0,
            };
            polygondata.push(polygon);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item,"item的值");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    GroupID:"switch_Polygon",
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    userData: JSON.stringify(itemJson.properties),
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  GroupID:"switch_Polygon",
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  userData: JSON.stringify(itemJson.properties),
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
          }
          // let newType = [...new Set(Type)];
          // console.log(newType, "TypeTypeType");
          this.polygondata1 = polygondata;
          this.polylinedata1 = polylinedata;

          // 高亮代码
          let polygonType = [];
          console.log(polygondata, "polygondata的值");
          polygondata.forEach((item) => {
            polygonType.push(item);
          });
          console.log(polygonType, "----polygon的Type----");
          this.setPolygonType_act(polygonType);
          // console.log(this.polygonType,"vuex里的polygonType");
          //  aa:{
          // 	"期末地类图斑":[],
          // "建设用地管制分区":[],
          // }

          this.setTuliPolygonData_act({
            text: "期末地类图斑",
            ids: polygondata,
          }); // 将画面的数据传到图例中
          this.setTuliPolyLineData_act({
            text: "期末地类图斑",
            ids: polylinedata,
          }); // 将画线的数据传到图例中
          // console.log("4:   " + Date.now().valueOf());

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // debugger
          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.tdlyQmdltbLoading = false;
          this.setTdlyQmdltbLoading_act(this.tdlyQmdltbLoading);

          // 过滤
          let filterHex = temp.hex.filter((item) => Type.includes(item.type));
          console.log(filterHex, "filterHex");
          temp.hex = filterHex;
          temp.hex.unshift({
            field_value: "default",
            hex: "#808080",
            layer_class_field: "SEN_LIN_LB",
            type: "其他",
          });

          //   console.log(temp_hex, "期末地类图斑temp的值(过滤前)");

          //   // xiang `
          //   const temp_hex = guihuaTableNames.find(
          //     (r) => r.layer_chinese_name === "期末地类图斑"
          //   );
          //   console.log(temp_hex.hex, "temp_hex的值111111111111");
          //   let newType = [];
          //   // ! 在这里进行一次比较
          //   temp_hex.hex.forEach((item) => {
          //     Type.forEach((mon) => {
          //       if (item.type === mon) {
          //         newType.push(item);
          //       }
          //     });
          //   });
          //   console.log(newType, "newType");
          //   //   this.setTuliData_act(newType);

          // //   temp_hex.hex = newType;
          //   console.log(temp_hex, "期末地类图斑temp的值(过滤后)");

          console.log(this.$store.state, "this.$store.state");
          // 判断vuex中是否有存储图例，无则直接加入，有则追加加入
          !this.tuliData || this.tuliData.length === 0
            ? this.setTuliData_act([temp])
            : this.setTuliData_act([...this.tuliData, temp]);

          //   // this.$store.dispatch("Sjsx/setTuliData_act", newType);
          //   // console.log("5:   " + Date.now().valueOf());
          //   // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue2 == false) {
          // console.log("6:   " + Date.now().valueOf());
          if (this.polygondata1 && this.polygondata1 instanceof Array) {
            // debugger;
            let polygondataIds = [];
            let polylinedata = [];

            this.polygondata1.forEach((element) => {
              polygondataIds.push(element.id);
            });
            this.polylinedata1.forEach((element) => {
              // window.__g.polygon.delete(element.id);
              polylinedata.push(element.id);
            });
            console.log(polygondataIds, polylinedata, "Polydata,Polyline");
            await window.__g.polygon.delete(this.polygonTypeId); // 关闭高亮的图层
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylinedata);

            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue2 = false; //请求失败后，将switch框设置为false
        this.tdlyQmdltbLoading = false;
        this.setTdlyQmdltbLoading_act(this.tdlyQmdltbLoading); // 请求失败后，将loading窗关闭
      }
    },

    // switch的改变(建设用地管制分区)
    async switchChange1(val) {
      console.log(val, "switch1改变");

      this.isdisabled = true;
      // this.$store.dispatch("Sjsx/setTuliData_act", null);

      if (val) {
        this.tdlyJsydLoading = true;
        this.setTdlyJsydLoading_act(this.tdlyJsydLoading);
        // this.$store.dispatch(
        //   "Sjsx/setTdlyJsydLoading_act",
        //   this.tdlyJsydLoading
        // );
        // this.switchValue = val;
        const temp = guihuaTableNames.find(
          (r) => r.layer_chinese_name === "建设用地管制分区"
        );

        console.log(temp.hex, "temp的值");
        await this.getRegionDataOne();
        // this.tdlyJsydLoading = false;
        // this.$store.dispatch(
        //   "Sjsx/setTdlyJsydLoading_act",
        //   this.tdlyJsydLoading
        // );
        // this.$store.dispatch("Sjsx/setTuliData_act", temp.hex);
      } else {
        await this.getRegionDataOne();
        let test = this.tuliData.filter(
          (item) => item.layer_chinese_name != "建设用地管制分区"
        );
        console.log(test, "test");
        // console.log(this.tuliData,"关闭时的tulidata");
        this.setTuliData_act(test);
        // this.setTuliData_act(null);
        // this.$store.dispatch("Sjsx/setTuliData_act", null);
      }
      this.isdisabled = false;
    },

    // switch的改变(期末地类图斑)
    async switchChange2(val) {
      console.log(val, "switch2改变");
      this.isdisabled = true;
      // this.$store.dispatch("Sjsx/setTuliData_act", null);
      if (val) {
        this.tdlyQmdltbLoading = true;
        this.setTdlyQmdltbLoading_act(this.tdlyQmdltbLoading);
        // this.$store.dispatch(
        //   "Sjsx/setTdlyQmdltbLoading_act",
        //   this.tdlyQmdltbLoading
        // );
        // this.switchValue = val;
        await this.getRegionDataTwo();
        // this.tdlyQmdltbLoading = false;
        // this.$store.dispatch(
        //   "Sjsx/setTdlyQmdltbLoading_act",
        //   this.tdlyQmdltbLoading
        // );
      } else {
        await this.getRegionDataTwo();
        let test = this.tuliData.filter(
          (item) => item.layer_chinese_name != "期末地类图斑"
        );
        console.log(test, "test");
        // console.log(this.tuliData,"关闭时的tulidata");
        this.setTuliData_act(test);
        // this.setTuliData_act(null);
        // this.$store.dispatch("Sjsx/setTuliData_act", null);
      }
      this.isdisabled = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tdlyztgh {
  margin-top: 25px;
  .tdlyztgh_top {
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .tdlyztgh_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
    }
  }
  .tdlyztgh_button {
    display: flex;
    margin-left: 10px;
    margin-top: 15px;
    .tdlyztgh_button_one {
      display: flex;
      align-items: center;
      margin-right: 60px;
    }
    .tdlyztgh_button_two {
      display: flex;
      align-items: center;
    }
    .tdlyztgh_button_title {
      margin-right: 8px;
    }
  }
  .tdlyztgh_middle {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .tdlyztgh_middle_title {
    }
    .tdlyztgh_middle_button {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      width: 420px;
      flex-wrap: wrap;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .tdlyztgh_middle_button_image {
        width: 430px;
        height: 115px;
        margin-bottom: 15px;
        .tdlyztgh_middle_content {
          width: 430px;
          height: 115px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 4px;
          cursor: pointer;
          margin-bottom: 15px;
          .tdlyztgh_middle_content_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.85);
            // padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .tdlyztgh_middle_content_bottom {
            padding-top: 8px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            color: #83fae5;
            // padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .tdlyztgh_middle_content_bottom_one {
              padding-top: 5px;
            }
            .tdlyztgh_middle_content_bottom_two {
              padding-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
